import React, { useState, useEffect } from 'react';
import ReactEcharts from 'echarts-for-react';
import './index.scss';

interface IVReactEchartsProps {
  getOptions: (params: any) => Promise<any>;
  style?: React.CSSProperties;
}
const VReactEcharts: React.FC<IVReactEchartsProps> = props => {
  const [options, setOptions] = useState({});
  useEffect(() => {
    props
      .getOptions({})
      .then(options => {
        setOptions(options);
      })
      .catch(err => {
        setOptions({});
      });
  }, [props.getOptions]);
  return (
    <div className="v-react-echarts" style={props.style}>
      <ReactEcharts option={options} />
    </div>
  );
};

export default VReactEcharts;
